﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 自定义分页栏样式 */
        .layui-laypage {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .navbar {
            display: none;
        }

        .layui-laypage a,
        .layui-laypage span {
            margin: 0 5px;
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #e2e2e2;
            border-radius: 3px;
            cursor: pointer;
        }

            .layui-laypage a:hover {
                color: #009688;
            }

        .layui-laypage .layui-laypage-curr {
            background-color: #009688;
            color: #fff;
        }
    </style>
</head>

<body>
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
        </div>
    </script>

    <script type="text/html" id="toolDemo">
    </script>
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['table', 'layer', 'jquery'], function () {
            var table = layui.table,
                layer = layui.layer,
                $ = layui.jquery;

            // 初始化表格
            table.render({
                elem: '#test',
                id: 'Feedbacktable',
                height: '680',
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'feedId', fixed: 'left', width: 80, title: 'ID', sort: true, totalRow: '合计：' },
                    { field: 'typeQuestionName', title: '问题类型' },
                    { field: 'contactemail', title: '问题描述' },
                    // { field: 'feedbackStatus', title: '反馈状态', templet: function (d) {
                    //     return d.feedbackStatus === false ? '待处理' : (d.feedbackStatus === true ? '处理完成' : d.feedbackStatus);
                    // }},
                    { field: 'mobilePhone', title: '手机号码' },
                    { field: 'email', title: '邮箱' },
                    { field: 'contactemail', title: '备注' }
                ]]
            });

            function loadFeedbackData() {
                $.ajax({
                    url:  `@ViewBag.BaseUrl/T5/Feedback/GetFeedback`,                  
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        layer.closeAll('loading');
                        if (res.code === 100) {
                            table.reload('Feedbacktable', {
                                data: res.data,
                            });
                        } else {
                            layer.msg('获取数据失败: ' + (res.message || '未知错误'), { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.closeAll('loading');
                        layer.msg('请求失败: ' + error, { icon: 2 });
                        console.error('Ajax请求失败:', xhr.responseText);
                    }
                });
            }

            // 加载用户数据
            loadFeedbackData();
        });
    </script>
</body>

</html>    